<template>
    <!--订单查询-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('pageTitle.adChannelQuality') }}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="date" label="">
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.date"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.startDate')"
                                    :end-placeholder="$t('common.endDate')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="appPackage" label="">
                            <select-app-list type="packageName" v-model="form.appPackage" :placeholder="$t('system.appPackage')"></select-app-list><!--app包名-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6"><!--广告商-->
                        <el-form-item prop="advertiser">
                            <el-select v-model="form.advertiser" :placeholder="$t('common.advertisers')" clearable style="width:100%;">
                                <el-option v-for="(item,index) in advertisersList" :key="index" :value="item" :label="item" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6"><!--广告来源-->
                        <el-form-item prop="advertisingSourse">
                            <el-select v-model="form.advertisingSourse" :placeholder="$t('common.adSource')" clearable style="width:100%;">
                                <el-option v-for="(item,index) in adSourceList" :key="index" :value="item" :label="item" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6"><!--广告账户-->
                        <el-form-item prop="advertisingAccount">
                            <el-select v-model="form.advertisingAccount" :placeholder="$t('common.adAccount')" clearable style="width:100%;">
                                <el-option v-for="(item,index) in adAccountList" :key="index" :value="item.advertisingAccount" :label="item.advertisingAccount" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="exportExcel" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column prop="getCustomerDate" :label="$t('common.customerDate')"><!--获客日期-->
                            <template slot-scope="scope">{{ scope.row.getCustomerDate | formatDate('yyyy-MM-dd') }}</template>
                        </el-table-column>
                        <el-table-column prop="advertiser" :label="$t('common.advertisers')"></el-table-column><!--广告商-->
                        <el-table-column prop="advertisingSourse" :label="$t('common.adSource')"></el-table-column><!--广告来源-->
                        <el-table-column prop="advertisingAccount" :label="$t('common.adAccount')"></el-table-column><!--广告账户-->
                        <el-table-column prop="installCount" :label="$t('common.installCount')"></el-table-column><!--安装-->
                        <el-table-column prop="totalCost" label="Total Cost"></el-table-column>
                        <el-table-column prop="cpi" label="CPI">
                            <template slot-scope="scope">{{ scope.row.cpi || 0 }}</template>
                        </el-table-column>
                        <el-table-column prop="registerCount" :label="$t('common.registration')"></el-table-column><!--注册-->
                        <el-table-column prop="applicationCount" :label="$t('common.applications')"></el-table-column><!--申请-->
                        <el-table-column prop="loanSuccessCount" :label="$t('common.loanReleasing')"></el-table-column><!--放款-->
                        <el-table-column prop="dueCount" :label="$t('common.deadDateCount')"></el-table-column><!--到期数-->
                        <el-table-column prop="overdueCount" :label="$t('common.overdueNumber')"></el-table-column><!--逾期数-->
                        <el-table-column prop="overdueRate" :label="$t('common.overdueRate')">
                            <template slot-scope="scope">{{ scope.row.overdueRate * 100 || 0 }}%</template>
                        </el-table-column><!--逾期率-->
                    </el-table>
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import SelectAppList from '@/components/select-app-list';

    let that = null;
    export default {
        name: 'report-adChannelQuality',
        components: {
            Pagination,
            SelectAppList
        },
        mixins: [mixin],
        data() {
            return {
                form: {
                    date: [],
                    appPackage: '',
                    advertiser: '',
                    advertisingSourse: '',
                    advertisingAccount: '',
                },
                rules: {
                    appPackage: [
                        {required: true, message: this.$t('verify.plsChoose'), trigger: 'change'},
                    ],
                },
                advertisersList: [],
                adSourceList: [],
                adAccountList: [],
            };
        },
        watch: {
            'form.appPackage'(val) {
                this.adAccountList = [];
                this.form.advertisingAccount = '';
                if (val) {
                    this.getAccountList(val);
                }
                else {
                    this.getAppList();
                }
            },
        },
        methods: {
            // 获取列表数据
            getTableData(page = this.page,callBack) {
                const params = this.fillParams(page);
                this.$api.report.queryAdvertisingReportList(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.data || [];
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 250;
                });
            },
            // 搜索列表数据
            search() {
//                if (!this.form.date) {
//                    this.$message.warning(this.$t('verify.plsChooseDate'));
//                    return;
//                }
                this.$refs.form.validate(val => {
                    if (val) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    appPackage: '',
                    getCustomerDateStart: '',
                    getCustomerDateEnd: '',
                    advertiser: '',
                    advertisingSourse: '',
                    advertisingAccount: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                if (form.date) {
                    params.getCustomerDateStart = form.date[0];
                    params.getCustomerDateEnd = form.date[1];
                }
                return params;
            },
            // 获取广告商&&广告来源&&广告账户数据
            getAdvertisersAndSourceList() {
                this.$api.report.queryAdvertiserAndAdvertising({}).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error) {
                        this.advertisersList = data.advertiserList;
                        this.adSourceList = data.AdvertisingSourceList;
                        //this.adAccountList = data.AdvertisingAccountList;
                    }
                });
            },
            // 获取广告账户数据
            getAccountList(appPackage) {
                const params = {
                    appPackage: appPackage,
                    advertiser: '',
                    page: {
                        pageNo: 1,
                        pageSize: 10000
                    }
                };
                this.$api.report.queryAdvertisingAccountList(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error) {
                        this.adAccountList = this.adAccountList.concat(data.data);
                    }
                });
            },
            getAppList() {
                const params = {
                    appListDomain: this.$storage.get('user').domain
                };
                this.$api.systemManage.getAppListdomain(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error) {
                        if (data.length > 0) {
                            data.forEach( item => {
                                this.getAccountList(item.packageName);
                            })
                        }
                    }
                })
            },
            exportExcel() {
                const params = this.fillParams();
                const user = this.$storage.get('user');
                const language = this.$storage.getLocal('language');
                params.language = language;
                params.token = user.token;
                const {$apiConf} = this;
                const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.report.advertisingReporExport, ['page']);
                this.$openNewBlank(url);
            },
        },
        created() {
            that = this;
            const today = new Date(new Date().toLocaleDateString()).getTime();
            const before7Days = today - 6*24*60*60*1000;
            this.form.date = [before7Days,today + 24*60*60*1000 - 1000];
            this.getAdvertisersAndSourceList();
            //this.getTableData();
            this.getAppList();
        },
    };
</script>

<style lang="scss">
    [data-page=report-adChannelQuality] {
        .noteRed {
            color: red;
        }
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
    }
</style>
